<template>
  <div class="risk">
    <eagle-tab-page-list2 ref="eaglePageList" @initList="bindData" @initActive="initActive"
      @onClickSearchButton="onClickSearchButton" @onClickDropdown="onClickDropdown" :params="params"
      url="/DangerTemplate/GetPageData" :filterParams="filterParams" :filterParamsDefaul="filterParamsDefaul"
      :filterTab="filterTab" :show_action="show_action" :active="active">
      <eagle-cell class="card" v-for="(dataItem, index) in list" :key="index" @click="goDetail(dataItem)">
        <div class="f15">{{ dataItem.Title }}</div>
        <div class="f666">{{ dataItem.Remarks || "暂无描述" }}</div>
        <van-row type="flex" justify="space-between" v-if="active == 2">
          <div @click.stop="edit(dataItem)">
            <img class="icon" src="@/assets/Images/AppIcon/icon_list_edit.png" alt="" />
            <span>修改名称</span>
          </div>
          <div @click.stop="handleDelete(dataItem)">
            <img class="icon" src="@/assets/Images/AppIcon/icon_delete.png" alt="" />
            <span>删除</span>
          </div>
        </van-row>
      </eagle-cell>
    </eagle-tab-page-list2>
    <van-dialog v-model="show" title="修改检查表名称" @confirm="handleConfirm()" show-cancel-button>
      <van-form>
        <van-field clickable name="Title" v-model="form.Title" placeholder="请输入" />
      </van-form>
    </van-dialog>

    <!-- <eagle-popup v-model="showAreaPop" title="选择地区" round :popStyle="{ height: '50%', width: '100%' }">

    </eagle-popup> -->
    <van-popup v-model="showAreaPop" position="bottom" :style="{ height: '60%' }">
      <van-area title="选择地区" :area-list="areaList" value="110101" :columns-num="2"
        :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="handleSelect" />
    </van-popup>
    <van-popup v-model="showSearchSelectPop" position="bottom" :style="{ height: '60%' }">
      <van-picker title="目录" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>

<script>
import { editName, dlete } from "@/api/dangerTemplate";
import { Dialog, Picker } from "vant";
import { areaList } from '@vant/area-data';
export default {
  components: {
    vanPicker: Picker,
  },
  data() {
    return {
      show: false,
      areaList: areaList,

      //     areaList:{
      //       province_list:{
      //         110000: '北京市',
      //   120000: '天津市',

      //       },
      //       city_list: {
      //   110100: '北京市',
      //   120100: '天津市',
      // },

      //     },
      opCode: "",
      active: 1,
      params: [
        {
          title: "公司检查表",
          dataType: "CompanyCMPLList",
          limit: 20,
          index: "0",
          opCode: ""
        },
        {
          title: "公共检查表",
          dataType: "SysCMPLList",
          limit: 20,
          applyProfession: 'IAPT00001',
          applyArea: '广东省/东莞市',
          index: "1",
          opCode: ""
        },
        {
          title: "我的检查表",
          dataType: "UserList",
          limit: 20,
          index: "2"
        },
      ],
      filterTab: true,
      filterParamsDefaul: [{ name: "applyProfession", value: "IAPT00001" }],
      filterParams: [
        {
          name: "applyProfession",
          title: "机械行业",
          originTitle: "机械行业",
          dataType: "string",
          data: [
            { text: "机械行业", value: "IAPT00001" },
          ],
        },
        {
          name: "AppointmentType",
          title: "广东省/东莞市",
          originTitle: "类别",
          dataType: "string",
          data: [
            // { text: "不限", value: "" },
            // { text: "安全生产领导小组认命", value: "A" },
            // { text: "安全生产管理人员认命", value: "B" },
          ],
        },
      ],
      list: [],
      form: {},
      show_action: true,
      showAreaPop: false,
      showSearchSelectPop: false,
      columns: [],
      TemplateList: [],
      TemplateList2: [],
      columnsT: [],
      columnsT2: [],
      isJG: false
    };
  },
  created() {
    if (this.$store.state.CompanyType == 'JG') {
      this.params[0].title = '单位检查表'
      this.isJG = true
    }
    let mychooseids = this.$store.state.Industry
    let mychooseNames = this.$store.state.IndustryName
    if (mychooseids != "" && mychooseNames != "") {
      this.params[1].applyProfession = mychooseids
      this.filterParams[0].title = mychooseNames
    }

    this.$axios.get("/DangerTemplateOP/GetTreeData", { params: { dataType: "CompanyCMPLList" } }).then(res => {
      res.data.map(item => {
        if (item.OPPNo == '00') {
          this.TemplateList.push({ name: item.OPName, value: item.OPCode })
          this.columnsT.push(item.OPName)
        }
      })
    })
    console.log("columns")

    console.log(this.columnsT)
    this.$axios.get("/DangerTemplateOP/GetTreeData", { params: { dataType: "SysCMPLList" } }).then(res => {
      res.data.map(item => {
        if (item.OPPNo == '00') {
          this.TemplateList2.push({ name: item.OPName, value: item.OPCode })
          this.columnsT2.push(item.OPName)
        }
      })
    })
    this.columns = this.columnsT

  },
  methods: {


    //地区选择 确认
    handleSelect(value) {
      let addressNames = []
      value.map(item => {
        if (item.name) {
          addressNames.push(item.name)
        }
      })
      this.filterParams[1].title = addressNames.join('/')
      this.params[1].applyArea = addressNames.join('/')
      this.showAreaPop = false
      console.log("1111")
      this.$refs.eaglePageList.getList(1)
      console.log("2222")
    },
    bindData(list) {
      this.list = list;
    },
    initActive(active) {

      if (active === 1) {
        // this.$refs.eaglePageList.changefilterTab(true);
        this.filterTab = true
        this.show_action = true
        this.columns = this.columnsT2
      } else if (active === 0) {
        this.filterTab = false
        this.show_action = true
        this.columns = this.columnsT
      }
      else {
        // this.$refs.eaglePageList.changefilterTab(false);
        this.filterTab = false
        this.show_action = false
      }

      console.log(this.filterTab)
      this.active = active;

    },
    edit(obj) {
      this.form.ID = obj.ID;
      this.form.TemplateType = obj.TemplateType;
      this.form.CompanyCode = obj.CompanyCode;
      this.form.Title = obj.Title;
      this.form.OPCode = obj.OPCode;
      this.show = true;
    },
    handleConfirm() {
      editName(this.form).then((res) => {
        this.$toast.success("编辑成功！");
        setTimeout(() => {
          this.$refs.eaglePageList.getList();
        }, 1000);
      });
    },
    handleDelete(item) {
      Dialog.confirm({
        title: "询问",
        message: "确定要删除该条记录吗?",
      })
        .then(() => {
          dlete({ id: item.ID }).then((res) => {
            this.$toast.success("删除成功！");
            setTimeout(() => {
              this.$refs.eaglePageList.getList();
            }, 1000);
          });
        })
        .catch(() => {
          // on cancel
        });
    },
    goDetail(item) {
      let url = this.isJG ? "/Danger/DangerTemplateDetailJG" : "/Danger/DangerTemplateDetail"
      this.$router.push({
        path: url,
        query: { tCode: item.TCode },
      });
    },
    //点击 搜索得筛选按钮
    onClickSearchButton() {

      this.showSearchSelectPop = true
    },
    //筛选取消
    onCancel() {
      this.showSearchSelectPop = false
    },
    onchange2(picker, value, index) {
      this.$toast(value);
    },
    onConfirm(value, index) {
      this.$toast(value);
      let templist = this.active == 1 ? this.TemplateList2 : this.TemplateList
      this.opCode = templist[index].value
      this.params.forEach(item => {
        item.opCode = this.opCode
      })
      this.showSearchSelectPop = false
      this.$refs.eaglePageList.getList(this.active);
    },

    onClickDropdown(name) {
      if (name == 'applyProfession') {
        this.$store.commit('setIndustry', "")
        this.$store.commit('setIndustryName', "")
        this.$router.push({
          path: "BaseInfo/Industry",
          query: {

          },
        });
      } else {
        this.showAreaPop = true
      }
    }
  },
};
</script>

<style lang="less" scoped></style>
